${
  helper.setPageMeta("title","表单")
  .setPageMeta("parent_file","/index.html")
}
<#assign capturedOutput>
	<style type="text/css">
	  #js-info { display:block; padding: 10px 20px; background: #fee; color: #800; margin: 0 0 10px 0; }
	  .js #js-info { display:none; }
	
	  p.switch { display:none; }
	  .js p.switch { display:block; }
	  
	  .active { font-weight:bold; color: #800 !important; }
	</style>
	<script type="text/javascript">
	$(document).ready(function(){
	
	  $('a[id*=toggle]').click(function(){
	    if ($(this).hasClass('active') === true) {
	      $('a').removeClass('active');
	      $('body').removeAttr('class');
	    } else {
	      $('a').removeClass('active');
	      $('body').removeAttr('class').addClass($(this).text());
	      $(this).addClass('active');
	    }     
	  });
	  $('a#formReset').click(function(){
	      $('a').removeClass('active');
	      $('body').removeAttr('class');
	      $(this).addClass('active');
	  });
	});
	</script>
	<script type="text/javascript">document.documentElement.className += " js";</script>
</#assign>
${helper.addAction("head",capturedOutput)}


	<h2>Simple Form. YAML-based form styling</h2>
          <div id="js-info">JavaScript has to be enabled for this demonstration.</div>
          <p class="switch"><strong>Toggle to change the form layout:</strong> <a id="formReset" class="active" href="#">linear (default)</a> | <a id="toggle_b" href="#">full</a> | <a id="toggle_a" href="#">columnar</a></p>

          <form method="post" action="" class="yform" role="application">
            <fieldset>
              <legend>First Fieldset (<code>text-fields</code> &amp; <code>select-boxes</code>)</legend>
              <div class="type-select">
                <label for="salutation">Salutation <sup title="This field is mandatory.">*</sup> </label>
                <select name="salutation" id="salutation" size="1" aria-required="true">
                  <option value="0" selected="selected" disabled="disabled">Please choose</option>
                  <option value="Mr.">Mr.</option>
                  <option value="Ms.">Ms.</option>
                  <option value="Mrs.">Mrs.</option>
                </select>
              </div>
              <div class="type-text">
                <label for="firstname">First name</label>
                <input type="text" name="firstname" id="firstname" size="20" />
              </div>
              <div class="type-text error" role="alert" aria-live="assertive">
                <strong class="message">Field &laquo;Last name&raquo; not properly filled.</strong>
                <label for="lastname">Last name <sup title="This field is mandatory.">*</sup></label>
                <input type="text" name="lastname" id="lastname" size="20"  aria-required="true"/>
              </div>
              <div class="type-text">
                <label for="email">E-Mail <sup title="This field is mandatory.">*</sup></label>
                <input type="text" name="email" id="email" size="20"  aria-required="true"/>
              </div>
            </fieldset>
            <fieldset>
              <legend>Second Fieldset (<code>select</code>, <code>textarea</code> &amp; <code>checkbox</code>)</legend>
              <div class="type-select">
                <label for="more">More Options</label>
                <select name="more" id="more" size="1">
                  <option value="0" selected="selected" disabled="disabled">Please choose</option>
                  <optgroup label="First options to choose from">
                    <option value="Empfehlung">Option 1</option>
                    <option value="Suchmaschine">Option 2</option>
                  </optgroup>
                  <optgroup label="Yet more options to choose from">
                    <option value="Weblog">Option 3</option>
                    <option value="Werbung">Option 4</option>
                    <option value="Zeitung / Magazin">Option 5</option>
                    <option value="Sonstiges">Option 6</option>
                  </optgroup>
                </select>
              </div>
              <div class="type-text">
                <label for="message">Message</label>
                <textarea name="message" id="message" cols="30" rows="7"></textarea>
              </div>
              <div class="type-check">
                <input type="checkbox" name="newsletter" id="newsletter" />
                <label for="newsletter">Sign me up for your newsletter</label>
              </div>
            </fieldset>
            <fieldset>
              <legend>Third Fieldset (<code>radio-buttons</code>)</legend>
              <div class="type-check">
                <div>
                    <input type="radio" name="vote" value="Option 1" id="vote1" />
                    <label for="vote1">Option 1</label>
                </div>
                <div>
                    <input type="radio" name="vote" id="vote2" />
                    <label for="vote2">Option 2</label>
                </div>
                <div>
                    <input type="radio" name="vote" id="vote3" />
                    <label for="vote3">Option 3</label>
                </div>
              </div>
            </fieldset>
            <div class="type-button">
              <input type="button" value="button" id="button1" name="button1" />
              <input type="reset" value="reset" class="reset" id="reset" name="reset" />
              <input type="submit" value="submit"  class="submit" id="submit" name="submit" />
            </div>
          </form>
